<template>
  <div class="table-box" ref="tableBox">
    <table>
      <thead>
        <tr ref="tableTitle">
          <th v-for="(c, i) in columns" :key="i">
            <span>{{ c.name }}</span>
          </th>
        </tr>
      </thead>

      <tbody ref="tbody">
        <tr v-for="(t, j) in tableData" ref="tableContent" :key="j">
          <td v-for="(c, k) in columns" :key="k">
            <span>{{ k == 0 ? j + 1 : t }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['tableData'],
  data() {
    return {
      columns: [
        {
          name: '序号',
          props: 'index'
        },
        {
          name: '企业名称',
          props: 'enName'
        }
      ],
      pageSize: 13
    }
  },
  created() {},
  mounted() {
    this.$refs.tableBox.addEventListener('mouseenter', () => {
      this.$emit('stopAutoPlay')
    })
    this.$refs.tableBox.addEventListener('mouseleave', () => {
      this.$emit('startAutoPlay')
    })
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.addLabel('start')
      let tableBox = TweenMax.from(this.$refs.tableBox, 0.3, { opacity: 0 })
      tl.add(tableBox, 'start+=0.3')
      let tableTitle = TweenMax.from(this.$refs.tableTitle, 0.3, {
        transform: 'scaleX(0)',
        opacity: 0,
        ease: Back.easeOut
      })
      tl.add(tableTitle, 'start+=0')
      let tableContentlist = this.$refs.tableContent
      let len =
        this.tableData.length > this.pageSize
          ? this.pageSize
          : this.tableData.length
      let lines1 = {}
      for (let i = 0; i < len; i++) {
        lines1[`line${i + 1}`] = TweenMax.from(tableContentlist[i], 0.4, {
          transform: 'scaleX(0)',
          opacity: 0,
          ease: Back.easeOut
        })
      }
      for (let i = 0; i < len; i++) {
        tl.add(lines1[`line${i + 1}`], 'start+=' + (i * 0.1 + 0.2))
      }
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box {
  position: relative;
  width: 100%;
  height: 550px;
  padding-top: 3px;
  font-size: 14px;
  .table-box-scroll {
    overflow: auto;
    width: 100%;
    height: 100%;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  table {
    width: 100%;
    display: block;
    tr {
      transform-origin: left top;
    }
    thead {
      table-layout: fixed;
      th {
        color: #fff;
        &:nth-child(1) {
          width: 50px;
          border-right: 2px solid rgba(0, 0, 0, 0);
        }
        &:nth-child(2) {
          width: 380px;
        }
      }
      &:before,
      &:after {
        display: block;
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #035ef0;
        content: '';
      }
      &:after {
        top: 36px;
      }
    }
    th,
    td {
      text-align: center;
    }
    th span {
      display: inline-block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      background-color: #035ef01a;
      white-space: nowrap;
    }

    tbody {
      color: #fff;
      height: 524px;
      overflow-y: scroll;
      overflow-x: hidden;
      display: block !important;
      margin-top: 4px;
      &::before {
        display: block;
        content: '-';
        height: 5px;
        color: rgba(0, 0, 0, 0);
      }
      tr {
        height: 40px;
        line-height: 40px;
        transform-origin: left top;
        &:nth-child(2n) {
          background-color: #035ef01a;
          span {
            display: inline-block;
            width: 100%;
          }
        }
        td:nth-child(1) {
          width: 52px;
          font-size: 12px;
        }
        td:nth-child(2) {
          width: 380px;
          span {
            display: block;
            width: 380px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        span {
          padding: 0 5px;
        }
      }
      .normal {
        color: #28a1ffcc;
      }
      .failed {
        color: #ed3445cc;
      }
      .unusual {
        color: #faa23fcc;
      }
    }
  }
}
</style>
